<template>
	<image src="../../static/image/12.png" mode="widthFix" class="bg"></image>
	<u-navbar
	title="订单详情"
	:autoBack="true"
	:background="{
	background:'transparent'
	}"
	:border-bottom="false"
	titleSize="28rpx" titleColor="#333"
	back-icon-color="#333"
	:isFixed="false"
	/>
	
	
	<view class="container">
		<view class="card">
			<image src="" mode="widthFix" class="img"></image>
			<view class="content cf" v-if="false">
				<view class="f36 bold">
					待支付
				</view>
				<view class="t-flex between mt10">
					<view class="">
						订单号
					</view>
					<view class="">
						2284746253535273
					</view>
				</view>
			</view>
			<view class="content cf t-flex between" v-else>
				<view class="">
					<view class="f36 bold">
						待支付
					</view>
					<view class="mt10">
						陪练师傅：张师傅
					</view>
				</view>
				<view class="right t-flex center bgf mainC f30 bold" @click="qrcodePopE.show = true">
					核销码
				</view>
			</view>
		</view>
		
		<view class="bgf p30 r20 mt20">
			<view class="user t-flex between">
				<uv-image src="" mode="aspectFill"
				width="90rpx"
				height="90rpx"
				radius="50%"
				></uv-image>
				<view class="right">
					<view class="f30 c3 bold">张三</view>
					<view class="tags t-flex">
						<view class="tag">轿车</view>
						<view class="tag">燃油车</view>
					</view>
				</view>
			</view>
			<view class="t-flex between mt20">
				<view class="c6">
					已预约 周六（2023.01.12 12:30-15:00）
				</view>
				<view class="prc bold f32">
					￥90
				</view>
			</view>
		</view>
		
		
		
		<view class="bgf p30 r20 mt20">
			<view class="goods t-flex between">
				<uv-image src="" mode="aspectFill"
				width="200rpx"
				height="160rpx"
				radius="20rpx"
				></uv-image>
				<view class="right">
					<view class="f32 c3 bold">
						特惠价实体验课1节
					</view>
					<view class="mt20">
						<text class="prc f32 bold">￥90</text> <text class="mprc ml20 bold">￥120</text>
					</view>
				</view>
			</view>
			
			<view class="mt20 tright">
				小计：￥90
			</view>
			
			
			
		</view>
		
		<view class="bgf p30 r20 mt20">
			<view class="f32 c3 bold">
				订单信息
			</view>
			
			<view class="li t-flex between mt20">
				<view class="c6">创建时间</view>
				<view class="c3">
					2023.09.12 18:23:32
				</view>
			</view>
			<view class="li t-flex between mt20">
				<view class="c6">订单金额</view>
				<view class="c3">
					￥56
				</view>
			</view>
			<view class="li t-flex between mt20">
				<view class="c6">现金券</view>
				<view class="c3">
					0
				</view>
			</view>
			<view class="li t-flex between mt20">
				<view class="c6">付款方式</view>
				<view class="c3">
					微信
				</view>
			</view>
			<view class="li t-flex between mt20">
				<view class="c6">支付金额</view>
				<view class="c3">
					￥56
				</view>
			</view>
		</view>
		
		<view class="bgf p30 r20 mt20">
			<view class="f32 c3 bold mb20">
				合同
			</view>
			<image src="" mode="widthFix" class="contract"></image>
		</view>
		
	</view>
	<view class="bpad"></view>
	
	<view class="bottom t-flex center safeArea bgf">
		<view class="bottomcontent t-flex">
			<view class="btn t-flex center s1">
				取消订单
			</view>
			<view class="btn t-flex center s2">
				立即支付
			</view>
			
			
		</view>
	</view>

	
	
	<qrcodePop ref="qrcodePopE"></qrcodePop>
	
</template>

<script setup lang="ts">
import { ref } from 'vue';
	
	const qrcodePopE = ref()
	

</script>

<style scoped lang="scss">
	.bg{
		width: 100%;
		position: absolute;
	}
	.container{
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 2;
	}
	
	.card{
		position: relative;
		.img{
			width: 100%;
		}
		.content{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			padding: 0 30rpx;
			padding-top: 36rpx;
			.right{
				border-radius: 200rpx;
				height: 70rpx;
				width: 160rpx;
			}
		}
	}
	
	
	.goods{
		.right{
			width: calc(100% - 230rpx);
			.prc{
				color: #FF1616;
			}
			.mprc{
				color: #BBBBBB;
				text-decoration: line-through;
			}
		}
	}
	
	.tright{
		text-align: right;
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		.bottomcontent{
			justify-content: flex-end;
			padding: 24rpx 30rpx;
			width: 100%;
			.btn{
				padding: 0 24rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 35rpx;
				box-sizing: border-box;
				margin-left: 24rpx;
			}
			.s1{
				color: #666;
				border: 2rpx solid #EEEEEE;
			}
			.s2{
				background-color: $main-color;
				color: #fff;
			}
		}
	}
	
	.ath{
		padding: 20rpx 30rpx;
		.icon{
			width: 48rpx;
			height: 48rpx;
		}
		color: #804101;
		.iconfont{
			color: #999;
		}
	}
	
	.contract{
		width: 160rpx;
	}
	
	.user{
		width: calc(100% - 100rpx);
		.right{
			width: calc(100% - 110rpx);
		}
		.tags{
			margin-top: 16rpx;
			.tag{
				padding: 0 16rpx;
				margin-right: 16rpx;
				height: 36rpx;
				background: #FFF8F4;
				border-radius: 4rpx;
				color: #FD541F;
				font-size: 20rpx;
			}
		}
	}
	
	.prc{
		color: #FF1616;
	}
	
</style>
